---
name: useRangeKnob
menu: Knobs
route: /use-range-knob
---

import { useState } from "react";
import { Playground } from "docz";
import { Inspector, useRangeKnob } from "../../src/lib";

### useRangeKnob(label, [{initialValue, min, max}])

Shows a slider in inspector panel and returns you the current value and a method to set the value.

- `label` - A label for the range slider
- `initialValue` - The initial value of the slider. Defaults to `0`.
- `min` - Minimum value of the slider. Defaults to `0`.
- `max` - Maximum value of the slider. Defaults to `0`.

#### Usage

```javascript
import { useRangeKnob } from "retoggle";
```

<Playground>
{() => {
    const [range, setRange] = useRangeKnob("Range", {
        initialValue: 4,
        min: 40,
        max: 300
    });

    return (
        <React.Fragment>
            <Inspector usePortal={false}/>
            {range}
        </React.Fragment>
    )

}}

</Playground>
